import {
  View,
  Image,
  Text,
  StyleSheet,
  ImageSourcePropType,
  LayoutChangeEvent,
  Pressable,
} from 'react-native'
import { flexCol } from '../../assets/style/common'
import { BlurView } from 'expo-blur'
import { NavigationContext } from '@react-navigation/native'
import { useContext } from 'react'

export interface VideoWrapProp {
  cover: ImageSourcePropType
  title: string
  like: number
  author: string
  onLayout?: (e: { width: number; height: number }) => void
}
export default function VideoWrap(props: VideoWrapProp) {
  const navigation = useContext(NavigationContext)
  function onLayout(event: LayoutChangeEvent) {
    const { width, height } = event.nativeEvent.layout
    props.onLayout && props.onLayout({ width, height })
  }
  //去视频详情页
  function goDetail() {
    navigation?.navigate('VideoSwiper')
  }
  return (
    <Pressable onPress={goDetail} style={vStyle.videoCard} onLayout={onLayout}>
      <View style={vStyle.coverWrap}>
        <Image style={vStyle.cover2} source={props.cover} />
        <BlurView style={vStyle.blurBgm} tint="light" />
        <Image style={vStyle.cover} source={props.cover} />
        <View style={[flexCol.default, vStyle.btnWrap]}>
          <Text style={vStyle.btn}>&#xe625;</Text>
        </View>
      </View>
      <View style={vStyle.footerWrap}>
        <Text style={vStyle.title}>{props.title}</Text>
        <View style={flexCol.default}>
          <Image
            style={vStyle.author}
            source={require('../../assets/images/avatar.jpg')}
          />
          <Text style={vStyle.authorName}>{props.author}</Text>
          <Text style={vStyle.heart}>&#x10186;</Text>
          <Text style={vStyle.like}>{props.like}</Text>
        </View>
      </View>
    </Pressable>
  )
}
const vStyle = StyleSheet.create({
  coverWrap: {
    position: 'relative',
    height: 148,
    width: '100%',
    borderTopLeftRadius: 6,
    borderTopRightRadius: 6,
    overflow: 'hidden',
  },
  cover: {
    width: '100%',
    height: '100%',
    resizeMode: 'contain',
    position: 'absolute',

    left: 0,
    top: 0,
    zIndex: 2,
  },
  blurBgm: {
    width: '100%',
    height: '100%',
    position: 'absolute',
    left: 0,
    top: 0,
  },
  cover2: {
    width: '100%',
    height: '100%',
    resizeMode: 'cover',
  },
  btnWrap: {
    position: 'absolute',
    left: 6,
    top: 6,
    width: 26,
    height: 26,
    borderRadius: 16,
    zIndex: 2,
    justifyContent: 'center',
  },
  btn: {
    fontSize: 25,
    color: '#fff',
    fontFamily: 'iconfont',
  },
  videoCard: {
    borderRadius: 6,
    backgroundColor: '#fff',
    marginBottom: 12,
  },
  author: {
    width: 20,
    height: 20,
    borderRadius: 10,
    overflow: 'hidden',
    marginLeft: 8,
    marginRight: 4,
    borderColor: '#eeeeee',
    borderWidth: 1,
  },
  authorName: {
    marginRight: 'auto',
    fontSize: 12,
    color: '#333333',
  },
  footerWrap: {
    paddingBottom: 8,
  },
  heart: {
    fontSize: 16,
    fontFamily: 'iconfont',
  },
  like: {
    marginLeft: 4,
    fontSize: 12,
    color: '#666666',
    marginRight: 8,
  },
  title: {
    color: '#333',
    fontSize: 14,
    marginHorizontal: 8,
    marginTop: 8,
    marginBottom: 6,
  },
})
